<template>
	<view class="ambitusShop-wrapper wrapperLayer borderBox">
		<view class="list-container colCen">
			<block v-for="(items,index) in list" :key="index">
				<view class="items-container colCen" @tap="geDetails(items)">
					<view class="relimg-content">
						<image class="main-img" :src="items.pic" mode="aspectFill"></image>
						<view class="shopLogo rowCenCen borderBox">
							<image class="logopic" :src="items.shopLogo" mode="aspectFill"></image>
						</view>
					</view>
					
					<view class="shop-name borderBox">
						{{items.shopName}}
					</view>
					
					<view class="tips-bar rowCen borderBox">
						<image class="shopicon" src="../../../static/images/community/market.png" mode="aspectFill"></image>
						<view class="tips-info">
							{{items.distance}}km丨{{items.businessDistrict}}丨{{items.typeStr}}丨人均￥{{items.consumptionPerPerson}}
						</view>
					</view>
					
					<view class="workingtime-bar rowCen borderBox">
						<view class="green-box rowCen">
							营业时间 | {{items.businessHours}}
						</view>
					</view>
					
					<view class="bottom-btn-bar rowCenEnd borderBox">
						<view class="clockBtn rowCenCen">
							<view>打卡</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<aLoadMore :status="loadstate" mode="loading3" :showTitle='true' color="#999999"></aLoadMore>
	</view>
</template>

<script>
	export default {
		props:{
			lcInfo:{
				type:Object,
				default:'',
			}
		},
		data(){
			return{
				list:[],
				pageNum:1,
				loadstate:'loading',
				canLoad:false
			}
		},
		created() {
			this.getList()
		},
		methods:{
			getList(){
				this.$http.post('bbc/shop/getShopList', {
					limit:10,
					offset:this.pageNum,
					latitude:this.lcInfo.latitude,
					longitude:this.lcInfo.longitude,
				}, 'application/json').then(res => {
					console.log(res);
					if(res.length<10){
						this.canLoad = false
						this.loadstate = 'nomore'
					}else{
						this.canLoad = true
						this.loadstate = 'loading'
						this.pageNum++
					}
					this.list = res
				})
			},
			
			getNextpage() {
				if (this.canLoad) {
					this.$http.post('bbc/shop/getShopList', {
						limit:10,
						offset:this.pageNum,
						latitude:this.lcInfo.latitude,
						longitude:this.lcInfo.longitude,
					}, 'application/json').then(res => {
						console.log(res);
						if(res.length<10){
							this.canLoad = false
							this.loadstate = 'nomore'
						}else{
							this.canLoad = true
							this.loadstate = 'loading'
							this.pageNum++
						}
						this.list = this.list.concat(res)
					})
				}
			},
			
			geDetails(info){
				uni.navigateTo({
					url:'./shopDetails?id='+info.id
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.ambitusShop-wrapper{
		width: 750rpx;
		padding: 0 26rpx;
		.sortbar-container{
			width: 100%;
			height: 80rpx;
			padding: 0 57rpx;
			background-color: #FFFFFF;
			.sort-items{
				.label-txt{
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
					margin-right: 12rpx;
				}
				.downIcon{
					width: 13rpx;
					height: 8rpx;
				}
			}
		}
		
		.list-container{
			width: 100%;
			margin-top: 20rpx;
			.items-container{
				width: 100%;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				background-color: #FFFFFF;
				.relimg-content{
					width: 100%;
					height: 234rpx;
					position: relative;
					.main-img{
						width: 100%;
						height: 100%;
						border-top-left-radius: 16rpx;
						border-top-right-radius: 16rpx;
					}
					.shopLogo{
						position: absolute;
						z-index: 10;
						width: 94rpx;
						height: 94rpx;
						background: #108687;
						border: 2rpx solid #FFFFFF;
						border-radius: 50%;
						left: 20rpx;
						top: 164rpx;
						.logopic{
							width: 94rpx;
							height: 94rpx;
							border-radius: 50%;
						}
					}
				}
				
				.shop-name{
					width: 100%;
					padding: 0 20rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					margin-top: 40rpx;
				}
				
				.tips-bar{
					width: 100%;
					margin: 18rpx 0rpx;
					padding: 0 20rpx;
					.shopicon{
						width: 20rpx;
						height: 20rpx;
						margin-right: 14rpx;
					}
					.tips-info{
						font-size: 22rpx;
						font-weight: 500;
						color: #666666;
					}
				}
				
				.workingtime-bar{
					width: 100%;
					padding: 0 20rpx;
					.green-box{
						height: 30rpx;
						background: rgba(16, 134, 135, 0.1);
						border-radius: 4rpx;
						padding: 0 8rpx;
						font-size: 22rpx;
						font-weight: 500;
						color: #108687;
					}
				}
				
				.bottom-btn-bar{
					width: 100%;
					padding: 0 20rpx;
					margin-bottom: 30rpx;
					.clockBtn{
						width: 168rpx;
						height: 52rpx;
						background: #FF002C;
						border-radius: 8rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>
